<script setup>
import CodeHighlighter from './components/CodeHighlighter.vue';
import 'highlight.js/styles/atom-one-dark.css';
import { OrbitControls, useGLTF } from '@tresjs/cientos';
import { model2code } from './utils/toCode';
import { ref } from 'vue';
import Car from './components/Car/index.vue'

const code = ref('//  这里将生成代码')
const hostValue = ref('http://localhost:5193')
const fileValue = ref('/models/car.glb')
const showscene = ref(false)
const handleClick = async () => {
  const { scene } = await useGLTF(hostValue.value + fileValue.value, { draco: true, decoderPath: '/draco/' })
  code.value = model2code(scene, fileValue.value)
  // return
  if (scene) {
    showscene.value = scene
  }
}
</script>

<template>
  <div class="title">
    <h1>glb2tresjs</h1>
    <h5 style="color:gray;">glb2tresjs 是一个用于将 glb 文件转换为 tresjs 组件代码的工具。</h5>
  </div>
  <div class="content">
    <div class="left">
      <h2>GLB-File</h2>
      <div class="dark-input-container">
        <label for="dark-input" class="dark-label">服务器地址:</label>
        <input id="dark-input" v-model="hostValue" class="dark-input" type="text" placeholder="http://127.0.0.1:8000" />
      </div>
      <div class="dark-input-container">
        <label for="dark-input" class="dark-label">文件地址:</label>
        <input id="dark-input" v-model="fileValue" class="dark-input" type="text" placeholder="/models/example.glb" />
      </div>
      <button class="dark-button" @click="handleClick">
        文件转换代码
      </button>
      <div class="example">
        <TresCanvas>
          <TresPerspectiveCamera :position="[10, 0, 10]" />
          <TresAmbientLight :intensity="3" />
          <TresDirectionalLight color="#ffffff" :intensity="5" castShadow :position="[0, 3, 0]" />
          <OrbitControls />
          <Suspense>
            <Car v-if="showscene" :file="hostValue + fileValue" />
          </Suspense>
        </TresCanvas>
      </div>
    </div>
    <div class="right">
      <h2>CODE</h2>
      <CodeHighlighter :content="code" language="JavaScript" class="jscode" />
    </div>
  </div>
  <div class="foot">
    <h5 style="color:gray;">DEVELOP AND OFFER OF 郭文军</h5>
  </div>
</template>

<style scoped>
.example {
  width: 100%;
  height: 300px;
  margin-top: 30px;
  --tw-shadow: 7px 7px 15px 0 #000;
  --tw-shadow-colored: 7px 7px 15px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Button styling */
.dark-button {
  width: 100%;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: bold;
  color: #e0e0e0;
  background-color: #333;
  /* Default dark background */
  border: 1px solid #444;
  /* Subtle border */
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Soft shadow */
}

.dark-button:hover {
  background-color: #4a90e2;
  /* Highlight background */
  border-color: #4a90e2;
  color: #fff;
  /* Bright text on hover */
  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.5);
  /* Slightly larger shadow */
}

.dark-button:active {
  background-color: #357ab8;
  /* Darker blue on active */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Smaller shadow */
  transform: scale(0.98);
  /* Subtle press effect */
}

.dark-button:disabled {
  background-color: #444;
  color: #666;
  border-color: #444;
  cursor: not-allowed;
  box-shadow: none;
}

/* Container styling */
.dark-input-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin: 20px auto;
  align-items: center;
  justify-content: space-around;
}

/* Label styling */
.dark-label {
  width: 150px;
  color: #aaa;
  font-size: 14px;
  font-weight: bold;
}

/* Input box styling */
.dark-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  color: #e0e0e0;
  background-color: #1e1e1e;
  /* Dark background */
  border: 1px solid #333;
  /* Subtle border */
  border-radius: 5px;
  outline: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Soft shadow */
}

/* Placeholder color */
.dark-input::placeholder {
  color: #555;
}

/* Hover effect */
.dark-input:hover {
  border-color: #555;
}

/* Focus effect */
.dark-input:focus {
  border-color: #4a90e2;
  /* Highlight color */
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
  /* Blue glow */
}

/* Disabled state */
.dark-input:disabled {
  background-color: #333;
  color: #666;
  cursor: not-allowed;
}

.foot {
  position: fixed;
  bottom: 10px;
  text-align: right;
  right: 40px;
}

.title {
  width: 50%;
  margin-left: 3%;
}

.content {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  width: 100%;
}

.left {
  width: 21%;
}

.right {
  width: 70%;
}
</style>
